<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
    <title>多边形编辑器吸附功能</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="https://webapi.amap.com/maps?v=2.0&key=90253c298848b952c2810dcdcfd95f49&plugin=AMap.PolygonEditor"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
	<script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.4.js"></script>
</head>

<body>
    <div id="container"></div>
    <div class="input-card" style="width: 120px">
        <button class="btn" onclick="createNewPolygon()" style="margin-bottom: 5px">新建</button>
        <button class="btn" onclick="startEditing()" style="margin-bottom: 5px">开始编辑</button>
        <button class="btn" onclick="stopEditing()">结束编辑</button>
    </div>
    <script type="text/javascript">
        function getQueryVariable(variable) {
            const query = window.location.search.substring(1);
            const vars = query.split('&');
            for (let i = 0; i < vars.length; i++) {
                const pair = vars[i].split('=');
                if (pair[0] === variable) {
                    return decodeURIComponent(pair[1]);
                }
            }
            return null;
        }

        const centerParam = getQueryVariable('center');
        let center = [116.471354, 39.994257]; // 默认中心坐标
        if (centerParam) {
            center = centerParam.split(',').map(Number);
        }

        let map;
        let polygon1;
        let polygon2;
        let polyEditor;

        function initMap() {
            try {
                map = new AMap.Map("container", {
                    center: center, // 使用传递过来的中心坐标
                    zoom: 16.8
                });
            } catch (error) {
                console.error('地图初始化失败:', error);
            }
        }

        function initPolygons() {
            const polygonPath1 = [];
            const polygonPath2 = [];
            polygon1 = new AMap.Polygon({
                path: polygonPath1
            });
            polygon2 = new AMap.Polygon({
                path: polygonPath2
            });
            map.add([polygon1, polygon2]);
            map.setFitView();
        }

        function initEditor() {
            polyEditor = new AMap.PolygonEditor(map);
            polyEditor.addAdsorbPolygons([polygon1, polygon2]);

            polyEditor.on('add', function (data) {
                console.log(data);
                const newPolygon = data.target;
                polyEditor.addAdsorbPolygons(newPolygon);
                newPolygon.on('dblclick', () => {
                    startEditing(newPolygon);
                });
            });

            polygon1.on('dblclick', () => {
                startEditing(polygon1);
            });

            polygon2.on('dblclick', () => {
                startEditing(polygon2);
            });
        }

        function createNewPolygon() {
            stopEditing();
            polyEditor.setTarget();
            polyEditor.open();
        }

        function startEditing(targetPolygon = polygon2) {
            polyEditor.setTarget(targetPolygon);
            polyEditor.open();
        }

        function stopEditing() {
            polyEditor.close();
            const polygon1Path = polygon1.getPath();
            const polygon2Path = polygon2.getPath();
            const polygonPaths = {
                polygon1: polygon1Path,
                polygon2: polygon2Path
            };
           uni.postMessage({
             data: {
               type: 'polygonCoordinates',
               data: polygonPaths
             }
           });
        }

        initMap();
        initPolygons();
        initEditor();
        startEditing();
    </script>
</body>

</html>